<template>
    <div class="appid-wrapper flex column">
        <div class="drop-down flex column">
            <div class="tips">
                <span style="font-weight: bold;">小程序互跳：</span>小程序需要跳转到其它小程序，必须在版本提交的时候将需要跳转的小程序appid提交给微信审核，否则不能进行跳转；可在下方一次性录入平台所有可能需要跳转的appid
                同时，两个小程序还需关联同一公众号，<a href="https://developers.weixin.qq.com/miniprogram/dev/#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7" target="_blank">如何获取小程序Appid</a>
            </div>
            <div class="drop-item flex">
                <Button type='primary' @click='showModel()'>+ 添加跳转小程序</Button>
            </div>
        </div>
        <div ref="tableContent" class="table-content">
            <Table :height="tableHeight" :columns="columns" :data="listData">
            </Table>
        </div>

        <Modal v-model="showAppEdit">
            <p slot="header" style="text-align:center">
                <span>添加小程序</span>
            </p>
            <div style="max-width: 90%;" class="flex center column-center">
                <Form ref="appListForm"  :model='appListForm' :rules='rule' label-position='left' :label-width="120">
                    <FormItem label="小程序Appid" prop="wechat_app_id">
                        <Input style="width: 200px;"  size="default" v-model="appListForm.wechat_app_id" placeholder="请输入小程序Appid"></Input>
                    </FormItem>
                    <FormItem label="小程序名称" prop="wechat_name">
                        <Input v-model="appListForm.wechat_name" placeholder="请输入小程序名称"></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <div class="flex column-center center model-footer">
                    <Button @click="saveAppid" type="primary">保存</Button>
                    <Button @click="showAppEdit=false">取消</Button>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>

    import { getAppList,createAppid,deleteAppid } from "api/shopInfo"
    export default {
        data() {
            return {
                // 是否显示编辑框
                showAppEdit: false,

                // 表单结构
                appListForm: {
                    // wechat_app_id
                    wechat_app_id: "",
                    // 小程序名称
                    wechat_name: "",
                    // 审核状态 0-否 1-是
                    audit_status: "",
                    // 创建时间
                    time_create: "",
                },
                // 表单规则
                rule: {
                    wechat_app_id: [
					{
                        required: true,
                        message: '小程序Appid不能为空',
                        trigger: 'blur'
                    }],
                    wechat_name: [
                    {
                        required: true,
                        message: '小程序名称不能为空',
                        trigger: 'blur'
                    }]
                },

                // 表格高度
                tableHeight: 0,

                // 表格列数据
                columns: [
					{
                        title: '小程序Appid',
                        key: 'wechat_app_id'
                    },
                    {
                        title: '小程序名称',
                        key: 'wechat_name'
                    },
                    {
                        title: '状态',
                        key: 'audit_status',
                        render: (h, params) => {
                            return h('div', params.row.audit_status == 0 ? '否' : '是');
                        }
                    },
                    {
                        title: '添加时间',
                        key: 'time_date'
                    },
                    
                    {
                        title: '操作',
                        key: 'action',
                        align: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: "确定要删除该小程序吗？",
                                                onOk: () => {
                                                    var parm = {};
                                                    parm.skipId = params.row.skip_id;
                                                    deleteAppid(parm).then(_res => {
                                                        this.$Message.success("删除小程序成功");
                                                        this.getData(this.page); 
                                                    }).catch(err => {
                                                        this.$Message.error("删除小程序失败");
                                                    });
                                                }
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],

                // 表格初始数据
                listData: [],
            }

        },
        methods: {

            // 点击页码事件
            changePage(page) {
                this.getData(page);
            },

            // 获取账号管理列表
            getData() {
                getAppList().then(_res => {
                    // 设置账号列表
                    this.listData = _res.data.data;
                }).catch(err => {
                    this.$Message.error(err.message);
                });
            },

            showModel() {
                this.showAppEdit = true;
            },

            // 创建新用户
            saveAppid() {
                var params = {}; 
                params.wechatName = this.appListForm.wechat_name;
                params.wechatAppId = this.appListForm.wechat_app_id;
                createAppid(params).then(_res => {
                    this.$Message.success("创建小程序成功");
                    this.showAppEdit = false;   
                    this.getData();              
                }).catch(err => {
                    this.$Message.error(err.message);
                });
            },

        },
        created() {
            this.getData()

            
        },
        computed: {

        },
        mounted() {
            this.$nextTick(function () {
                this.tableHeight = this.$refs.tableContent.offsetHeight;
            })
        },
        components: {}
    }
</script>

<style scoped>
    .appid-wrapper {
        /*padding: 12px 20px 12px 12px;*/
        height: calc(100vh - 112px);     
    }
    .table-content {
        flex: 1;
    }
    .drop-down {
        font-size: 14px;
        padding: 18px;
        background: white;
        overflow-x: auto;
    }
    .drop-down .tips {
        font-size: 14px;
        color: black;
        height: 80px;
        background: rgba(244, 244, 244, 1);
        padding: 18px;
    }

    .drop-item {
        margin-right: 30px;
        justify-content: flex-end;
        padding-top: 20px;   
    }

    .drop-item:last-child {
        margin-right: 0;
    }

    .drop-item span {
        margin-right: 10px;
    }

    .flex-block {
        flex: 1;
    }

    .model-footer {}

    .model-footer button {
        padding: 5px 20px;
    }

    .model-footer button:first-child {
        margin-right: 20px;
    }
</style>

<style type="text/css">
    .appid-wrapper .ivu-table td.log-content {
        padding: 16px 0;
    }
    .appid-wrapper .ivu-table-title {
        border-bottom: 1px solid #eeeeee;
    }
    
    .appid-wrapper .ivu-table:before {
        display: none!important;
        background-color: transparent!important;
    } 

    .appid-wrapper .ivu-table:after {
        width: 0!important;
        height: 100%!important;
        background: transparent!important;
        display: none!important;
    }

    .appid-wrapper .ivu-table-wrapper {
        border: none!important;
    }

    .appid-wrapper tr span {
        font-size: 12px!important;
    }

    .appid-wrapper .ivu-table-cell {
        padding-left: 18px!important;
    }
    
</style>
